import React, { useRef, useEffect, useState } from "react";
import * as echarts from "echarts";
import { fetchEchartData } from "../request/hytApi";

const StackedHorizontalBar = () => {
  const chartRef = useRef(null); // 使用 useRef 来引用图表容器
  const [chartData, setchartData] = useState(null); // 用于存储图表数据，初始为 null

  // 异步请求数据
  const fetchEchartDataFn = async () => {
    const res = await fetchEchartData();
    setchartData(res.data.drugsdatas.weekChart); // 设置图表数据
  };

  // 配置项
  const getOption = (data) => ({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: data?.type ? [...data.type].reverse() : [], // 使用 slice() 和 reverse() 翻转数据
    },
    series:
      data?.data?.map((item) => ({
        name: item.name, // 系列名称
        type: "bar", // 类型是柱状图
        stack: "total", // 设置为堆叠
        label: {
          show: true, // 显示数据标签
          position: "insideTop", // 标签位置
        },
        emphasis: {
          focus: "series", // 鼠标悬浮时高亮系列
        },
        data: item.data, // 对应的每天数据
        barWidth: 50, // 设置柱状图的宽度
      })) || [],
  });

  // 请求数据
  useEffect(() => {
    fetchEchartDataFn();
  }, []); // 仅在组件首次加载时发起数据请求

  // 初始化并更新图表
  useEffect(() => {
    if (chartData && chartRef.current) {
      const chartInstance = echarts.init(chartRef.current); // 初始化 ECharts 实例
      chartInstance.setOption(getOption(chartData)); // 设置配置项

      // Resize event listener
      const handleResize = () => chartInstance.resize();
      window.addEventListener("resize", handleResize); // 注册 resize 事件

      // 清理工作
      return () => {
        chartInstance.dispose(); // 销毁 ECharts 实例
        window.removeEventListener("resize", handleResize); // 移除 resize 事件
      };
    }
  }, [chartData]); // 每次 chartData 更新时重新渲染图表

  return (
    <div
      ref={chartRef}
      style={{ width: "100%", height: "100%" }} // 设置图表容器的宽度和高度
    ></div>
  );
};

export default StackedHorizontalBar;
